<template>
  <div class="p-2">
    <div class="file-area">
      <el-table
        :data="fileList"
        :row-class-name="tableRowClassName"
        class="file-table"
        tooltip-effect="dark"
      >
        <template #empty>
          <p>拖拽文件到此处！</p>
        </template>
        <el-table-column label="序号" type="index" width="80px"></el-table-column>
        <el-table-column label="文件名" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column
          label="类型"
          prop="fileType"
          show-overflow-tooltip
          width="120px"
        ></el-table-column>
        <el-table-column label="状态" prop="status" show-overflow-tooltip width="120px">
          <template #default="{ row }">
            <el-button v-if="row.status === 2" type="text" @click="openPath(row.outpath)"
              >转换完成
            </el-button>
            <span v-else :loading="row.status === 1">{{ filText(row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button type="text" @click="openPath(row.path)">打开文件</el-button>
            <!--<el-button type="text" @click="transformFile($index)">文件转换</el-button>-->
            <el-button type="text" @click="deleteFile($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
// import { Top, Bottom, DeleteFilled,Refresh } from '@element-plus/icons-vue'
import { openPath } from './tool'
// import { ElMessage } from 'element-plus'

// const SUPORT_INPUT_EXT = [ 'mp4', 'mov', 'avi', 'mkv']

const showFileDrop = ref(false)
const fileList = ref([])

function init() {
  dropFile()
}

// 拖动文件
function dropFile() {
  window.addEventListener(
    'dragenter',
    (e) => {
      e.preventDefault()
      e.stopPropagation()
      showFileDrop.value = true
    },
    false
  )
  window.addEventListener('drop', (e) => {
    e.preventDefault()
    e.stopPropagation()

    showFileDrop.value = false
    if (!e.dataTransfer) return
    const dropfiles = []
    console.log('dataTransfer', e.dataTransfer.items)
    for (let i = 0; i < e.dataTransfer.items.length; i++) {
      const item = e.dataTransfer.items[i]
      if (item.kind == 'file') {
        const filename = item?.getAsFile().name
        const ext = filename.substring(filename.lastIndexOf('.') + 1)
        console.log('ext', ext)
        // SUPORT_INPUT_EXT.includes(ext) && dropfiles.push(item.getAsFile())
        dropfiles.push(item.getAsFile())
      }
    }
    console.log(dropfiles)
    fileList.value = dropfiles.map((item, key) => {
      return {
        name: item?.name.split('.')[0],
        path: item?.path,
        id: key,
        status: 0, // 0 代处理  1 进行中  2 已完成
        filetype: item?.name.split('.')[1]
      }
    })
    console.log('fileList', fileList)
  })
  window.addEventListener(
    'dragover',
    (e) => {
      e.preventDefault()
      e.stopPropagation()
    },
    false
  )
}

function isDrop() {
  showFileDrop.value = !showFileDrop.value
}

// 删除文件
function deleteFile(id: number) {
  const fileLists: Array<any> = fileList.value
  fileLists.splice(id, 1)
}

/**
 * 上移
 */
// function moveUp(index: number) {
//   let fileLists: Array<any> = fileList.value;
//   if (index != 0) {
//     fileLists[index] = fileLists.splice(index - 1, 1, fileLists[index])[0];
//   } else {
//     fileLists.push(fileLists.shift());
//   }
// }
/**
 * 下移
 */
// function moveDown(index: number) {
//   let fileLists: Array<any> = fileList.value;
//   if (index != fileLists.length - 1) {
//     fileLists[index] = fileLists.splice(index + 1, 1, fileLists[index])[0];
//   } else {
//     fileLists.unshift(fileLists.splice(index, 1)[0]);
//   }
// }

// 全部清空
function removeAll() {
  fileList.value = []
}

function changeFile(value) {
  fileList.value = value
}

defineExpose({
  isDrop,
  init,
  removeAll,
  fileList,
  changeFile
})

onMounted(init)

// const pageTitle = ref({
//   type: 'mp4',
//   output: ''
// })

// 过滤文字
function filText(val) {
  return ['待转换', '转换中', '转换完毕'][val]
}

// 转换文件
// async function transformFile(index: number) {
//   // 假设 fileList.value[index] 为需要转换的文件
//   const tagFile: FileListType = fileList.value[index]
//   console.log('tagFIle', tagFile)
//   // 请自行实现转换逻辑
//   const {path, name, fileType} = tagFile
//   console.log('path', path)
//   const outpath = `${pageTitle.value.output ? pageTitle.value.output : (path as string).substring(0, (path as string).indexOf(name))}${name}.${pageTitle.value.type}`
//   const info = {
//     input: path,
//     fileType,
//     type: pageTitle.value.type,
//     output: outpath
//   }
//   try {
//     const res = await window.electron.ipcRenderer.invoke('merge-merges', info)
//     if (res.success) {
//       tagFile.status = 2
//       tagFile.outpath = outpath
//       ElMessage.success(res.message)
//     } else {
//       ElMessage.error(`${res.message}, 文件：${res.path || '--'}`)
//     }
//   } catch (e) {
//     console.log('merge', e)
//   }
// }

function tableRowClassName({ row }) {
  if (row.status === 1) {
    return 'working-row'
  } else if (row.status === 2) {
    return 'success-row'
  }
  return ''
}
</script>

<style scoped>
.file-table {
  height: calc(100vh - 230px - 1rem);
  width: 100%;
}
</style>
